<template>
	<view class="upload-com">
		<view class="img-box" v-for="(item,idx) in imgList" :key="'uploadimg_'+idx">
			<view class="iconfont del-ico c-danger" @click="delImg(idx)">&#xe609;</view>
			<image class="upload-img" :src="item" mode="aspectFit"></image>
		</view>
		<view class="img-box" @click="editPhoto">
			<text class="iconfont">&#xe607;</text>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import { chooseImage, hideLoading, showLoading, uploadFile } from '../common/util';
	const emit = defineEmits(["imgChange"])
	const imgList = ref([])
	const editPhoto = () => {
		chooseImage(async (res) => {
			try {
				showLoading()
				const fileRes = await uploadFile(res.tempFilePaths[0] + '')
				const data = JSON.parse(fileRes.data)
				imgList.value.push(data.msg)
				hideLoading()
			} catch (err) {
				//
			}

			emit('imgChange', imgList.value)
		})

	}
	const delImg = (idx : number) => {
		imgList.value.splice(idx, 1)
		emit('imgChange', imgList.value)
	}
</script>

<style lang="scss">
	.upload-com {
		.img-box {
			width: 180rpx;
			height: 180rpx;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			background-color: #eee;
			border-radius: 8rpx;
			margin-right: 15rpx;
			vertical-align: top;
			position: relative;
		}

		.upload-img {
			width: 100%;
			height: 100%;
			border-radius: 8rpx;
		}

		.del-ico {
			font-size: 30rpx;
			position: absolute;
			right: -20rpx;
			top: -20rpx;
			padding: 10rpx;
			z-index: 10;
		}
	}
</style>